<template>
    <fieldset>
        <legend>Cart</legend>
        <h1>购物车Cart</h1>
        <ul>
            <li v-for="item in cart" :key="item.id">
                名称：<span>{{ item.title }}</span>
                价格：<span>{{ item.price }}</span>
                数量：<span>{{ item.count }}</span>
                <button @click="delCart(item)">删除</button>
            </li>
        </ul>
        <h1>总价：{{total}}</h1>
    </fieldset>
</template>

<script setup>
import {useCart} from "../../store/cart"
import {useProduct} from "../../store/products"
import { storeToRefs } from "pinia"

let useStore1 = useCart()
let useStore = useProduct()

let { cart,total } = storeToRefs(useStore1)
let {products } = storeToRefs(useStore)

let delCart=(it)=>{
   it.count--
   if(it.count===0){
        // cart.value=cart.value.filter(item=>item.id!==it.id)
       cart.value.forEach((item,index) => {
        if(item.id === it.id) {
            cart.value.splice(index,1)
            return
        }
       })
   }
       let cc= products.value.find(item=>item.id==it.id)
    cc.inventory++
   
}
</script>